<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the view-padding sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/view-padding/index.html
  -->
    <title>View padding | Sample | ArcGIS API for JavaScript 4.16</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #sidebar {
            z-index: 99;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            width: 320px;
        }

        #text {
            color: white;
            padding: 3%;
        }


    </style>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="/js/arcgisjsapi/4.16/esri/css/main.css">
    <link rel="stylesheet" href="/js/arcgisjsapi/4.16/esri/css/view.css">
    <link
            rel="stylesheet"
            href="/js/arcgisjsapi/4.16/esri/themes/light/main.css"
    />

    <script type="text/javascript">
        dojoConfig = {
            baseUrl:"localhost:8088/js/arcgisjsapi/4.16/dojo",
            async:true,
            parseOnLoad: true,
            packages: [{
                name: 'arcgis',
                location: "/js/arcgisjsapi/4.16"
            }]
        };
    </script>

    <script src="/js/arcgisjsapi/4.16/init.js"></script>

    <script src="/js/arcgisjsapi/4.16/"></script>

    <script src="/js/arcgisjsapi/4.16/dojo/dojo.js"
            data-dojo-config="async:true"></script>




    <script>
        require([
            "arcgis/esri/Map",
            "arcgis/esri/views/MapView",
            "arcgis/esri/layers/ImageryLayer",
            "arcgis/esri/layers/GeoJSONLayer",
            "arcgis/esri/layers/OpenStreetMapLayer",
            "arcgis/esri/Graphic",
            "arcgis/bdlib/GBGraphic"
        ], function (Map, MapView, ImageryLayer,GeoJSONLayer,
                     OpenStreetMapLayer,Graphic,
                     GBGraphic) {
            /********************
             * Create image layer
             ********************/

            var layer = new ImageryLayer({
                url:
                    "https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer",
                format: "jpgpng" // server exports in either jpg or png format
            });


            var url =
                "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";

            // Paste the url into a browser's address bar to download and view the attributes
            // in the GeoJSON file. These attributes include:
            // * mag - magnitude
            // * type - earthquake or other event such as nuclear test
            // * place - location of the event
            // * time - the time of the event
            // Use the Arcade Date() function to format time field into a human-readable format

            var template = {
                title: "Earthquake Info",
                content: "Magnitude {mag} {type} hit {place} on {time}",
                fieldInfos: [
                    {
                        fieldName: "time",
                        format: {
                            dateFormat: "short-date-short-time"
                        }
                    }
                ]
            };

            var renderer = {
                type: "simple",
                field: "mag",
                symbol: {
                    type: "simple-marker",
                    color: "orange",
                    outline: {
                        color: "white"
                    }
                },
                visualVariables: [
                    {
                        type: "size",
                        field: "mag",
                        stops: [
                            {
                                value: 2.5,
                                size: "4px"
                            },
                            {
                                value: 8,
                                size: "40px"
                            }
                        ]
                    }
                ]
            };

            var geojsonLayer = new GeoJSONLayer({
                url: url,
                copyright: "USGS Earthquakes",
                popupTemplate: template,
                renderer: renderer //optional
            });


            var osmLayer = new OpenStreetMapLayer();

            /**************************
             * Add image layer to map
             *************************/

            var map = new Map({
                basemap: "gray",
                logo:false,
                layers: [osmLayer, layer, geojsonLayer]
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-100, 40],
                zoom: 5
            });

            /*************************
             * Create a point graphic
             *************************/

                // First create a point geometry (this is the location of the Titanic)
            var point = {
                    type: "point", // autocasts as new Point()
                    longitude: -49.97,
                    latitude: 41.73
                };

            // Create a symbol for drawing the point
            var markerSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                color: [226, 119, 40],
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 2
                }
            };

            // Create a graphic and add the geometry and symbol to it
            var pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol
            });

            /****************************
             * Create a polyline graphic
             ****************************/

                // First create a line geometry (this is the Keystone pipeline)
            var polyline = {
                    type: "polyline", // autocasts as new Polyline()
                    paths: [
                        [-111.3, 52.68],
                        [-98, 49.5],
                        [-93.94, 29.89]
                    ]
                };

            // Create a symbol for drawing the line
            var lineSymbol = {
                type: "simple-line", // autocasts as SimpleLineSymbol()
                color: [226, 119, 40],
                width: 4
            };

            // Create an object for storing attributes related to the line
            var lineAtt = {
                Name: "Keystone Pipeline",
                Owner: "TransCanada",
                Length: "3,456 km"
            };

            /*******************************************
             * Create a new graphic and add the geometry,
             * symbol, and attributes to it. You may also
             * add a simple PopupTemplate to the graphic.
             * This allows users to view the graphic's
             * attributes when it is clicked.
             ******************************************/
            var polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: lineSymbol,
                attributes: lineAtt,
                popupTemplate: {
                    // autocasts as new PopupTemplate()
                    title: "{Name}",
                    content: [
                        {
                            type: "fields",
                            fieldInfos: [
                                {
                                    fieldName: "Name"
                                },
                                {
                                    fieldName: "Owner"
                                },
                                {
                                    fieldName: "Length"
                                }
                            ]
                        }
                    ]
                }
            });

            /***************************
             * Create a polygon graphic
             ***************************/

                // Create a polygon geometry
            var polygon = {
                    type: "polygon", // autocasts as new Polygon()
                    rings: [
                        [-64.78, 32.3],
                        [-66.07, 18.45],
                        [-80.21, 25.78],
                        [-64.78, 32.3]
                    ]
                };

            // Create a symbol for rendering the graphic
            var fillSymbol = {
                type: "simple-fill", // autocasts as new SimpleFillSymbol()
                color: [227, 139, 79, 0.8],
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 1
                }
            };

            // Add the geometry and symbol to a new graphic
            var polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: fillSymbol
            });
            var gras = null;
            try {
                gras =( new GBGraphic()).getGraphics();

            }
            catch (e) {
                alert(e);
            }
            // Add the graphics to the view's graphics layer
            view.graphics.addMany(gras);


            //layer.visible = false;
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>

</body>
</html>